<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="套餐名称" prop="mealName">
              <el-input v-model="queryParams.mealName" placeholder="请输入套餐名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button v-hasPermi="['kitchen:setMeal:add']" type="primary" icon="Plus" @click="handleAdd">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-hasPermi="['kitchen:setMeal:remove']" type="danger" icon="Delete" :disabled="multiple" @click="handleDelete()"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button v-hasPermi="['kitchen:setMeal:export']" type="warning" icon="Download" @click="handleExport">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="setMealList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="套餐名称" align="center" prop="mealName" />
        <el-table-column label="主题类型" align="center" prop="topicTypeName" />
        <el-table-column label="所在区划" align="center" prop="areaName" width="180" />
        <el-table-column label="是否热门" align="center" prop="isHot">
          <template #default="scope">
            <dict-tag :options="yes_or_no" :value="scope.row.isHot"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="菜系类型" align="center" prop="cuisineType" />
        <el-table-column label="显示价格" align="center" prop="labelPrice" />
        <el-table-column label="支付价格" align="center" prop="totalPrice">
          <template #default="scope"> {{ scope.row.totalPrice }} 元 </template>
        </el-table-column>
        <el-table-column label="原价" align="center" prop="otPrice" />
        <el-table-column label="使用人数" align="center" prop="minUseCount">
          <template #default="scope"> {{ scope.row.minUseCount }} ~ {{ scope.row.maxUseCount }} 人 </template>
        </el-table-column>
        <el-table-column label="套餐状态" align="center" prop="state">
          <template #default="scope">
            <dict-tag :options="module_state" :value="scope.row.state"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="套餐配置" placement="top">
              <el-button v-hasPermi="['kitchen:setMeal:edit']" link type="primary" icon="KnifeFork" @click="handleUpdate(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="修改" placement="top">
              <el-button v-hasPermi="['kitchen:setMeal:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button v-hasPermi="['kitchen:setMeal:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
    </el-card>

    <!-- 添加或修改套餐对话框 -->
    <el-drawer
      v-model="dialog.visible"
      :size="form.id != undefined && form.id > 0 ? '85%' : '50%'"
      :title="dialog.title"
      :direction="direction"
      :before-close="cancel"
      close-on-click-modal
    >
      <el-form ref="setMealFormRef" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="form.id != undefined && form.id > 0 ? 11 : 24">
            <el-row>
              <el-col :span="12">
                <el-form-item label="套餐名称" prop="mealName">
                  <el-input v-model="form.mealName" placeholder="请输入套餐名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="主题类型" prop="topicTypeId">
                  <el-select v-model="form.topicTypeId" placeholder="请选择主题类型" clearable @change="selectType">
                    <el-option v-for="item in topicTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所在区划" prop="provinceArray">
                  <AreaOptions
                    v-if="dialog.visible"
                    ref="AreaOptions1"
                    :model-value="form.provinceArray"
                    :is-has-dis="1"
                    @change="handleChangeProvince"
                    @expand-change="handleExpandChange"
                  ></AreaOptions>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="显示价格" prop="labelPrice">
                  <el-input v-model="form.labelPrice" placeholder="请输入套餐显示价格文本">
                    <template #append>
                      <el-color-picker v-model="form.labelPriceColor" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属菜系" prop="cuisineType">
                  <el-select v-model="form.cuisineType" placeholder="请选择菜品分类" clearable>
                    <el-option v-for="dict in cuisine_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付价格" prop="totalPrice">
                  <el-input v-model="form.totalPrice" placeholder="请输入支付价格">
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="原价" prop="otPrice">
                  <el-input v-model="form.otPrice" placeholder="请输入黑线划过的价格">
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="使用人数" prop="minUseCount" style="display: flex">
                  <el-input v-model="form.minUseCount" type="number" placeholder="最少人数" style="width: 95px" />
                  <span style="margin: 0 10px"> ~ </span>
                  <el-input v-model="form.maxUseCount" type="number" placeholder="最多人数" style="width: 95px"> </el-input
                  ><span style="margin-left: 10px">人</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否热门" prop="isHot">
                  <!--              0 - 否  1 - 是-->
                  <el-radio-group v-model="form.isHot">
                    <el-radio v-for="dict in yes_or_no" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="套餐状态" prop="state">
                  <el-radio-group v-model="form.state">
                    <el-radio v-for="dict in module_state" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="套餐介绍" prop="introduce">
                  <!--              ，富文本说明-->
                  <editor v-model="form.introduce" placeholder="请输入内容" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col v-if="form.id != undefined" :span="13">
            <el-row style="margin: 20px">
              <!--              <el-col :span="24" >套餐配菜</el-col>-->
              <el-col :span="24">
                <el-card shadow="never">
                  <template #header>
                    <el-row :gutter="10" class="mb8">
                      <el-col :span="1.5">
                        <el-button v-hasPermi="['kitchen:setMealFoodType:add']" type="primary" icon="Plus" @click="handleAddFoodType"
                          >新增菜品</el-button
                        >
                      </el-col>
                    </el-row>
                  </template>

                  <el-table v-loading="loading" :data="setMealFoodTypeList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="菜品分类名称" align="center" prop="foodTypeName" />
                    <el-table-column label="排序索引" align="center" prop="sort" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                      <template #default="scope">
                        <el-tooltip content="配餐" placement="top">
                          <el-button
                            v-hasPermi="['kitchen:setMealFoodType:edit']"
                            link
                            type="primary"
                            icon="KnifeFork"
                            @click="getTransferData(scope.row)"
                          ></el-button>
                        </el-tooltip>
                        <el-tooltip content="修改" placement="top">
                          <el-button
                            v-hasPermi="['kitchen:setMealFoodType:edit']"
                            link
                            type="primary"
                            icon="Edit"
                            @click="handleUpdateFoodType(scope.row)"
                          ></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                          <el-button
                            v-hasPermi="['kitchen:setMealFoodType:remove']"
                            link
                            type="primary"
                            icon="Delete"
                            @click="handleDeleteFoodType(scope.row)"
                          ></el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>

              <el-col v-if="isEditFood" :span="24" style="margin-top: 1vh">
                <el-card shadow="never">
                  <template #header>
                    <div>{{ '请选择【' + foodTypeName + '】菜谱' }}</div>
                  </template>

                  <el-transfer
                    v-model="foodIdList"
                    class="custom-transfer"
                    filterable
                    :titles="['未添加', '已添加']"
                    :button-texts="['删除', '添加']"
                    :data="foodAllList"
                    :props="{
                      key: 'foodId',
                      label: 'labelFoodName'
                    }"
                    :format="{
                      noChecked: '${total}',
                      hasChecked: '${checked}/${total}'
                    }"
                    @change="handleTransferChange"
                  >
                    <template #left-footer>
                      <!--                    <el-button class="transfer-footer" size="small">Operation</el-button>-->
                    </template>
                    <template #right-footer>
                      <!--                    <el-button class="transfer-footer" size="small">Operation</el-button>-->
                    </template>
                  </el-transfer>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 添加或修改套餐里的菜品类型对话框 -->
    <el-dialog v-model="dialogFoodType.visible" :title="dialogFoodType.title" width="500px" append-to-body>
      <el-form ref="setMealFoodTypeFormRef" :model="formFoodType" :rules="rules" label-width="80px">
        <el-form-item label="菜品分类" prop="foodTypeId">
          <el-select v-model="formFoodType.foodTypeId" placeholder="请选择菜品分类" clearable @change="selectFoodType">
            <el-option v-for="item in foodTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序索引" prop="sort">
          <el-input v-model="formFoodType.sort" placeholder="请输入排序索引" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitFormFoodType">确 定</el-button>
          <el-button @click="cancelFootType">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="SetMeal" lang="ts">
import { listSetMeal, getSetMeal, delSetMeal, addSetMeal, updateSetMeal, getSetMealInfoTransferData } from '@/api/kitchen/setMeal';
import { SetMealVO, SetMealQuery, SetMealForm } from '@/api/kitchen/setMeal/types';
import AreaOptions from '@/components/AreaOptions/index.vue';
import { listNoPageTopicType } from '@/api/kitchen/topicType';
import { TopicTypeVO } from '@/api/kitchen/topicType/types';
import { SetMealInfoForm } from '@/api/kitchen/setMeal/info/types';
import { addSetMealInfo, delSetMealInfo, removeByInfo } from '@/api/kitchen/setMeal/info';
import { SetMealFoodTypeForm, SetMealFoodTypeVO } from '@/api/kitchen/setMeal/foodType/types';
import {
  addSetMealFoodType,
  delSetMealFoodType,
  getSetMealFoodType,
  listSetMealFoodType,
  updateSetMealFoodType
} from '@/api/kitchen/setMeal/foodType';
import { FoodTypeVO } from '@/api/kitchen/food/type/types';
import { listNoPageFoodType } from '@/api/kitchen/food/type';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { module_state, yes_or_no, cuisine_type } = toRefs<any>(proxy?.useDict('module_state', 'yes_or_no', 'cuisine_type'));

const direction = ref<DrawerProps['direction']>('rtl');
const setMealFoodTypeList = ref<SetMealFoodTypeVO[]>([]);
const foodTypeList = ref<FoodTypeVO[]>([]);
const topicTypeList = ref<TopicTypeVO[]>([]);
const setMealList = ref<SetMealVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const foodIdList = ref([]);
const foodAllList = ref([]);
const isEditFood = ref(false);
const foodTypeName = ref('');

const queryFormRef = ref<ElFormInstance>();
const setMealFormRef = ref<ElFormInstance>();
const setMealFoodTypeFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const dialogFoodType = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: SetMealForm = {
  id: undefined,
  mealName: undefined,
  topicTypeId: undefined,
  topicTypeName: undefined,
  provId: undefined,
  cityId: undefined,
  districtId: undefined,
  isHot: undefined,
  cuisineType: undefined,
  introduce: undefined,
  labelPrice: undefined,
  labelPriceColor: undefined,
  totalPrice: undefined,
  otPrice: undefined,
  minUseCount: undefined,
  maxUseCount: undefined,
  state: undefined,
  createTime: undefined,
  areaName: undefined,
  provinceArray: undefined
};

const initInfoFormData: SetMealInfoForm = {
  id: undefined,
  mealId: undefined,
  foodId: undefined,
  foodName: undefined,
  foodType: undefined,
  imgUrl: undefined,
  count: undefined,
  unit: undefined,
  weight: undefined,
  origin: undefined,
  sort: undefined,
  remark: undefined,
  state: undefined
};

const initFoodTypeFormData: SetMealFoodTypeForm = {
  id: undefined,
  mealId: undefined,
  foodTypeId: undefined,
  foodTypeName: undefined,
  sort: 1
};

const data = reactive<PageData<SetMealForm, SetMealQuery>>({
  form: { ...initFormData },
  formInfo: { ...initInfoFormData },
  formFoodType: { ...initFoodTypeFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    mealName: undefined,
    topicTypeId: undefined,
    provId: undefined,
    cityId: undefined,
    districtId: undefined,
    isHot: undefined,
    cuisineType: undefined,
    introduce: undefined,
    labelPrice: undefined,
    labelPriceColor: undefined,
    totalPrice: undefined,
    otPrice: undefined,
    minUseCount: undefined,
    maxUseCount: undefined,
    state: undefined,
    createTime: undefined,
    params: {}
  },
  queryParamsFoodType: {
    pageNum: 1,
    pageSize: 10,
    mealId: undefined,
    foodTypeId: undefined,
    foodTypeName: undefined,
    sort: undefined,
    params: {}
  },
  rules: {
    id: [{ required: true, message: '不能为空', trigger: 'blur' }],
    mealName: [{ required: true, message: '套餐名称不能为空', trigger: 'blur' }],
    topicTypeId: [{ required: true, message: '绑定主题类型不能为空', trigger: 'blur' }],
    provId: [{ required: true, message: '所在省份不能为空', trigger: 'blur' }],
    cityId: [{ required: true, message: '所在城市不能为空', trigger: 'blur' }],
    districtId: [{ required: true, message: '所在区县不能为空', trigger: 'blur' }],
    isHot: [{ required: true, message: '是否热门 0 - 否  1 - 是不能为空', trigger: 'blur' }],
    cuisineType: [{ required: true, message: '菜系类型不能为空', trigger: 'change' }],
    introduce: [{ required: true, message: '套餐介绍，富文本说明不能为空', trigger: 'blur' }],
    labelPrice: [{ required: true, message: '套餐显示价格文本不能为空', trigger: 'blur' }],
    labelPriceColor: [{ required: true, message: '套餐显示价格文本 字体颜色不能为空', trigger: 'blur' }],
    totalPrice: [{ required: true, message: '支付价格不能为空', trigger: 'blur' }],
    otPrice: [{ required: true, message: '黑线划过的价格不能为空', trigger: 'blur' }],
    minUseCount: [{ required: true, message: '最少使用人数不能为空', trigger: 'blur' }],
    maxUseCount: [{ required: true, message: '最多使用人数不能为空', trigger: 'blur' }],
    state: [{ required: true, message: '套餐状态不能为空', trigger: 'blur' }],
    createTime: [{ required: true, message: '添加时间不能为空', trigger: 'blur' }]
  }
});

const { queryParams, queryParamsFoodType, form, formInfo, formFoodType, rules } = toRefs(data);

/** 查询套餐列表 */
const getList = async () => {
  loading.value = true;
  const res = await listSetMeal(queryParams.value);
  setMealList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

const renderFunc = (h: (type: string, props: VNodeProps | null, children?: string) => VNode, option: Option) => {
  return h('span', null, option.label);
};
/**
 *  穿梭框 菜品添加的change 事件
 * @param val
 */
const handleTransferChange = (value: number[] | string[], direction: 'left' | 'right', movedKeys: string[] | number[]) => {
  console.log('value', value);
  console.log('direction', direction);
  console.log('movedKeys', movedKeys);

  formInfo.value.mealId = form.value.id;
  formInfo.value.foodTypeId = formFoodType.value.foodTypeId;
  formInfo.value.foodTypeName = formFoodType.value.foodTypeName;

  for (let index in movedKeys) {
    formInfo.value.foodId = movedKeys[index];
    console.log('formInfo.foodId', formInfo.value.foodId);
    let food = foodAllList.value.find((option) => option.foodId == formInfo.value.foodId);
    console.log('调整的菜品', food);
    formInfo.value.foodName = food.foodName;
    formInfo.value.count = food.count;
    formInfo.value.unit = food.unit;
    formInfo.value.weight = food.weight;
    formInfo.value.imgUrl = food.imgUrl;
    formInfo.value.origin = food.origin;
    formInfo.value.sort = index;

    if (direction == 'right') {
      //添加
      formInfo.value.state = 1;
      addSetMealInfo(formInfo.value).finally(() => (buttonLoading.value = false));
      proxy?.$modal.msgSuccess('添加成功');
    } else {
      //删除
      removeByInfo(formInfo.value);
      proxy?.$modal.msgSuccess('删除成功');
    }
  }

  // formInfo.fooName = this.queryParamsRelation.cateChildId;
  // formInfo.cateChildName = this.queryParamsRelation.cateChildName;
  //
  // if(direction == 'right'){//添加
  //   await addSetMealInfo(formInfo.value).finally(() => (buttonLoading.value = false));
  // }else{//删除
  //   removeByRuleId(this.formRelation);
  //   this.msgSuccess("删除成功");
  // }
};

/**
 *  主题分类change事件
 * @param val
 */
const selectType = (val) => {
  console.log('selectType', val);
  let type = topicTypeList.value.find((option) => option.id == val);
  form.value.topicTypeName = type.typeName;
};

/**
 *  主题分类change事件
 * @param val
 */
const selectFoodType = (val) => {
  console.log('selectType', val);
  let type = foodTypeList.value.find((option) => option.id == val);
  formFoodType.value.foodTypeName = type.typeName;
};

/** 查询套餐里的菜品类型列表 */
const getMealFoodTypeList = async () => {
  loading.value = true;
  const res = await listSetMealFoodType(queryParams.value);
  setMealFoodTypeList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 查询transfer数据 */
const getTransferData = async (row) => {
  isEditFood.value = true;
  formFoodType.value = row;
  foodTypeName.value = row.foodTypeName
  const res = await getSetMealInfoTransferData(row);
  Object.assign(foodIdList.value, res.data.foodIdList);
  Object.assign(foodAllList.value, res.data.foodAllList);
};

/** 查询套餐里的美食信息列表 */
const getFoodTypeList = async () => {
  const res = await listNoPageFoodType(queryParams.value);
  foodTypeList.value = res.data;
};

const handleChangeProvince = (e) => {
  console.log('handleChangeProvince', e);
  form.value.provinceArray = e;
};

// TODO：各父级选项值组成的数组
const handleExpandChange = (e) => {
  console.log(e);
};

/** 查询套餐列表 */
const getTopicList = async () => {
  const res = await listNoPageTopicType(queryParams.value);
  topicTypeList.value = res.data;
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 取消按钮 */
const cancelFootType = () => {
  resetFoodType();
  dialogFoodType.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  setMealFormRef.value?.resetFields();
  isEditFood.value = false;

  foodIdList.value = [];
  foodAllList.value = [];
  setMealFoodTypeList.value = [];
};

/** 表单重置 */
const resetFoodType = () => {
  formFoodType.value = { ...initFoodTypeFormData };
  setMealFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: SetMealVO[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAddFoodType = () => {
  resetFoodType();
  getFoodTypeList();
  dialogFoodType.visible = true;
  dialogFoodType.title = '添加菜品品类';
};

/** 修改按钮操作 */
const handleUpdateFoodType = async (row?: SetMealFoodTypeVO) => {
  resetFoodType();
  getFoodTypeList();
  const _id = row?.id || ids.value[0];
  const res = await getSetMealFoodType(_id);
  Object.assign(formFoodType.value, res.data);
  foodTypeName.value = formFoodType.value.foodTypeName;
  dialogFoodType.visible = true;
  dialogFoodType.title = '修改菜品品类';
};

/** 删除按钮操作 */
const handleDeleteFoodType = async (row?: SetMealFoodTypeVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除套餐里的菜品类型编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
  await delSetMealFoodType(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getMealFoodTypeList();
};

/** 提交按钮 */
const submitFormFoodType = () => {
  setMealFoodTypeFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      formFoodType.value.mealId = form.value.id;
      if (formFoodType.value.id) {
        await updateSetMealFoodType(formFoodType.value).finally(() => (buttonLoading.value = false));
      } else {
        await addSetMealFoodType(formFoodType.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialogFoodType.visible = false;
      await getMealFoodTypeList();
    }
  });
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  getTopicList();
  dialog.visible = true;
  dialog.title = '添加套餐';
};

/** 修改按钮操作 */
const handleUpdate = async (row?: SetMealVO) => {
  reset();
  getTopicList();
  const _id = row?.id || ids.value[0];
  const res = await getSetMeal(_id);
  Object.assign(form.value, res.data);
  queryParamsFoodType.value.mealId = form.value.id;
  getMealFoodTypeList();
  dialog.visible = true;
  dialog.title = '修改套餐';
};

/** 提交按钮 */
const submitForm = () => {
  setMealFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateSetMeal(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addSetMeal(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialog.visible = false;
      await getList();
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: SetMealVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除套餐编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
  await delSetMeal(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'kitchen/setMeal/export',
    {
      ...queryParams.value
    },
    `setMeal_${new Date().getTime()}.xlsx`
  );
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.custom-transfer {
  text-align: left;
  display: inline-block;
  //width: 500px; /* 设置宽度 */
  height: 100%; /* 设置高度 */
}

:deep .el-transfer-panel {
  /* 左右两个穿梭框的高度和宽度 width: 240px;  */
  width: 14vw;
  height: 47vh;
}
:deep .el-transfer-panel__body {
  /* 左右两个穿梭框的高度和宽度 width: 240px;  */
  height: 42.5vh;
}

:deep .el-transfer-panel__list.is-filterable {
  height: 40vh; /* 穿梭框列表高度 */
}
</style>
